<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.moveBox{
				width: 100px;
				height: 5px;
				background-color: #11ee66;			/* 背景色，直接写英文，写RGB数字，3个16进制值构成，前面# */
				
				/* 动画三个参数 （动画名称，执行动画的时间，infinite无限次循环）*/
				animation: mymove 2s infinite;
			}
			/* @keyframes关键帧 动画的名称 由第一帧到关键帧（最后一帧）中间帧都是动画引擎自己实现 */
			@keyframes mymove{
				from{width: 0px; }   /* 第一帧 */
				to{ width: 300px; }  /* 最后一帧 */
			}
			
			.transitionBox{
				width: 100px;
				height: 100px;
				background-color: blue;
				transition: width 2s;		/* transition拉伸，宽度，持续2s */
			}
			.transitionBox:hover{		/* 触发动画：鼠标移到上面hover，移除自动恢复 */
				width: 300px;				/* 动画，从width=100，持续s2， 拉伸width=300 */
			}
			ul{									/* ul+li 结构实现页面上菜单 */
				list-style: none;			/* ul默认每个选项li前面增加一个点，初始样式，去掉点修饰 */
			}
			li{										/* 条目，一个菜单 */
				float: left;						/* li默认是换行标签，不让换行，浮动，居左，连在后面，超出部分自动换行 */
				margin-right: 15px;		/* li之间空15个像素 */
				background-color: #ee1166;
				padding: 5px 10px 5px 10px;
				
				/* 浏览器自己去扩充的动画，-webkit谷歌chrome  浏览器兼容性 */
				/* transform 变相 skewX X方向进行倾斜角度30° deg单位必须写。里面的内容也会倾斜 */
				-webkit-transform: skewX(30deg);
			}
			li:hover{	/* 不能有空格，坑。 鼠标移入执行，鼠标移出还原 */
				background-color: aqua;
			}
			a{ /* a链接标签，默认文字是有下划线， 链接点击是一个紫色，没点击过是默认颜色。 */
				text-decoration: none;		/* 文字修饰：none去掉文字修饰 */
				color: white; /* 有了背景色，文字显示白色，比较突显 */
				
				/* 上面的动画会造成文字进行倾斜，倾斜回来：反着转-30° */
				-webkit-transform: skewX(-30deg);
				display: block; /* 改变a标签性质，不然进行换行，改成块结构，配合上一句动画把字正过来 */
			}
		</style>
	</head>
	<body>
		<div>移动效果：</div>
		<div class="moveBox"></div>
		
		<div>拉伸效果：</div>
		<div class="transitionBox"></div>
		
		<div>菜单效果：</div>
		<div>
			<ul>
				<li><a href="http://www.sina.com.cn" target="_blank">新浪新闻</a></li>
				<li><a href="http://toutiao.com" target="_blank">今日头条</a></li>
				<li><a href="http://www.baidu.com" target="_blank">百度新闻</a></li>
				<li><a href="http://www.fh.com" target="_blank">凤凰卫视</a></li>
			</ul>
		</div>
	</body>
</html>
